<template>
	<view class="codeLoginBox">
		
		<my-top :isback="true" :isline="true"></my-top>
		<view class="mine-header">
			<i @click="back" class="iconfont todayfanhui"></i>
			<text @click="registered">
				注册
			</text>
		</view>
		<my-mine-title title="验证码登录" style="margin-top: 40rpx;"></my-mine-title>
		<view class="inputBox">
			<view class="accountdBox">
				<input maxlength="11" v-model="form.phone" class="ipt ipt1" type="text" placeholder="请输入您的手机号码" />
				<view class="registered">
					<image @click="clearPhone" style="width: 32rpx;height: 32rpx;" src="../../../static/img/delPhone.png" mode=""></image>
				</view>
			</view>
			<view class="pasdwordBox">
				<input v-model="form.code" style="outline: none;" class="ipt ipt2" placeholder="输入验证码"></input>
				<view v-if="!countFlag" @click="getCode" class="seepassword">
					<text>获取验证码</text>
				</view>
				<text class="againGetCode" v-else>
					<text style="color: #04A1FB;">{{countNum}}</text>秒后重新获取验证码
				</text>
			</view>
			<button @click="login" type="default" class="loginButton">登录</button>

			<view class="" style="margin:24rpx 0 20rpx;display: flex;height: 30rpx;line-height: 30rpx;">
				<checkbox-group @change="checkboxChange">
					<checkbox value="1" :checked="false" />
				</checkbox-group>
				<text style="color: #BEBEBE;font-size: 20rpx;margin-left: 10rpx;">
					我已阅读并同意
				</text>
				<text style="color: #04A1FB;font-size: 20rpx;">使用条款</text>
				<text style="color: #BEBEBE;font-size: 20rpx;">与</text>
				<text style="color: #04A1FB;font-size: 20rpx;">隐私协议</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setUserInfo
	} from "@/utils/loginCode.js"
	import {
		signCode,
		SmsCodeLogin,
		checkUserAlready
	} from "@/api/api.js"
	export default {
		data() {
			return {
				phone: "18537234312",
				code: "", //验证码
				countFlag: false,
				countNum: 60,
				// 用于倒计时标记，true-正在倒计时
				countFlag: false,
				// 定时器
				intervalBtn: {},
				iscode: "",
				//默认按钮的值
				btnMsg: "点击发送验证码",
				agree: false,
				form: {
					phone: null,
					code: null
				},
			}
		},
		methods: {
			//登录
			login() {
				if (!this.form.phone) {
					return uni.showToast({
						title: "请输入手机号码",
						icon: "none"
					})
				}
				if (!this.form.code) {
					return uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
				}
				if (!this.agree) {
					return uni.showToast({
						title: "请先同意使用条款与隐私协议",
						icon: "none"
					})

				}
				if (this.iscode !== this.form.code) {
					return uni.showToast({
						title: "验证码错误",
						icon: "none"
					})
				}
				try {
					SmsCodeLogin(this.form).then(res => {
						if (res.statusCode == 200 && res.data.code == 0) {
							// 存入本地
							setUserInfo(res.data.data.userTb)
							//用户信息存入vuex
							this.$store.commit("initData/setUserInfo", res.data.data.userTb)
							uni.showToast({
								title: "登录成功",
								icon: "none"
							});
							uni.switchTab({
								url: "../../home/index"
							})
						} else {
							uni.showToast({
								title: "登录失败 请重试",
								icon: "none"
							})
						}
					})
				} catch (e) {
					uni.showToast({
						title: "请重试",
						icon: "none"
					})
				}

			},
			clearPhone() {
				for (let i in this.form) {
					this.form[i] = null;
				}
			},
			// 是否同意隐私协议
			checkboxChange(val) {
				if (val.detail.value == 1) {
					this.agree = true;
				} else {
					this.agree = false;
				}
			},
			// 返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 注册
			registered() {
				uni.navigateTo({
					url: "./registered"
				})
			},
			async isRegistered() {
				let result = await checkUserAlready({phone:this.form.phone}).then(res => {
					if (res.statusCode == 200 && res.data.code == 0) {
						return res.data.data
					} else {
						uni.showToast({
							title: "失败 请重试",
							icon: "none"
						})
					}
				})
				return result
			},
			reg(val) {
				return /^1(3|4|5|6|7|8|9)\d{9}$/.test(val)
			},
			// 获取验证码
			async getCode() {
				if (!this.form.phone) {
					return uni.showToast({
						title: "请输入手机号码",
						icon: "none"
					})
				}
				let reg = this.reg(this.form.phone);
				if (!reg) {
				return	uni.showToast({
						title: "手机号码格式不正确！",
						icon: "none"
					})
				} 
				let result = await this.isRegistered();
				if (result == 0) {
					return uni.showModal({
						title: '提示',
						content: '该账号还未注册 是否前往注册',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: "registered"
								})
							} else if (res.cancel) {
								uni.showToast({
									title: "还未注册 请前往注册",
									icon: "none"
								})
							}
						}
					});
				}
				if (!this.countFlag) {
					this.timer()
					try {
						signCode({
							phone: this.form.phone
						}).then(res => {
							console.log(res);
							if (res.statusCode == 200 && res.data.data.code) {
								this.iscode = res.data.data.code
							} else {
								uni.showToast({
									title: "获取验证码失败",
									icon: "none"
								})
							}
						})
					} catch (e) {
						uni.showToast({
							title: "请重试",
							icon: "none"
						})
					}
				}

			},
			timer() {
				this.btnMsg = null;
				this.countFlag = !this.countFlag;
				this.intervalBtn = setInterval(() => {
					if (this.countNum <= 0) {
						clearInterval(this.intervalBtn)
						this.countFlag = !this.countFlag;
						this.countNum = 60;
					} else {
						this.countNum--;
					}
				}, 1000);
			}

		}
	}
</script>

<style scoped lang="scss">
	
/deep/ 	uni-checkbox .uni-checkbox-input::before{
		background-color: #4A83F1!important;
	}
	.codeLoginBox{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: $today-bg-color;
	}
	.againGetCode {
		width: 55%;
		font-size: 24rpx;
	}

	.other {
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999999;
		font-size: 28rpx;
	}

	.seepassword {
		width: 25%;
		color: #04A1FB;
		font-size: 24rpx;
		height: 32rpx;
		text-align: right;
	}

	.accountdBox {
		display: flex;
		margin-top: 28rpx;
		border-bottom: 1px dashed #DDDDDD;
		justify-content: space-between;
		align-items: center;
	}

	.pasdwordBox {
		display: flex;
		margin-top: 28rpx;
		border-bottom: 1px dashed #DDDDDD;
		justify-content: space-between;
		align-items: center;
	}

	.button-hover {
		background: rgba(4, 161, 251, .8) !important;
	}

	.loginButton {
		margin-top: 24rpx;
		color: #FFFFFF;
		font-size: 44rpx;
		border-radius: 20rpx;
		background-color: #4A83F1;
		letter-spacing: 20rpx;
	}

	.ipt {
		color: #333333;
		height: 61rpx;
		font-size: 32rpx;
		border: none;
	}

	.ipt2 {
		width: 90%;
	}

	.inputBox {
		width: 100%;
		padding: 0 48rpx;
		margin-top: 100rpx;
	}

	.mine-header {
		width: 100%;
		padding: 0 48rpx;
		display: flex;
		justify-content: space-between;
		height: 88rpx;
		align-items: center;
		font-size: 40rpx;
		color: #999999;
	}
</style>
